﻿.commission-page {
	padding: 20rpx;
	background: #f6f6f6;
	min-height: 100vh;
}

.stats-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-around;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.stats-item {
	text-align: center;
	
	.stats-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #ff6b35;
		margin-bottom: 8rpx;
	}
	
	.stats-label {
		font-size: 24rpx;
		color: #666;
	}
}

.filter-bar {
	background: #fff;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	display: flex;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.filter-item {
	flex: 1;
	text-align: center;
	padding: 16rpx 0;
	font-size: 28rpx;
	color: #666;
	border-radius: 8rpx;
	
	&.active {
		background: #ff6b35;
		color: #fff;
	}
}

.commission-list {
	// 佣金列表不需要额外边距，因为外层已经有padding
}

.list-item {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.order-info {
	.order-no {
		font-size: 28rpx;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.order-time {
		font-size: 24rpx;
		color: #999;
	}
}

.status-badge {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	color: #fff;
	
	&.status-pending {
		background: #ff9500;
	}
	
	&.status-settled {
		background: #34c759;
	}
}

.item-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.commission-info {
	flex: 1;
	
	.commission-row {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
		
		.label {
			font-size: 24rpx;
			color: #666;
			width: 140rpx;
		}
		
		.value {
			font-size: 24rpx;
			color: #333;
		}
	}
}

.commission-amount {
	text-align: right;
	
	.amount-label {
		font-size: 24rpx;
		color: #666;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.amount-value {
		font-size: 32rpx;
		font-weight: bold;
		color: #ff6b35;
	}
}

.item-footer {
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #f0f0f0;
	
	.settle-time {
		font-size: 24rpx;
		color: #999;
	}
}

.empty-state {
	text-align: center;
	padding: 100rpx 0;
	
	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
}

.loading-state {
	text-align: center;
	padding: 40rpx 0;
	
	.loading-text {
		font-size: 28rpx;
		color: #999;
	}
}

.load-more {
	text-align: center;
	padding: 40rpx 0;
	
	.load-more-text {
		font-size: 28rpx;
		color: #ff6b35;
	}
}